<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="一级分类">
        <el-select
          v-model="Catergory1Id"
          placeholder="请选择"
          :disabled="show"
          @change="handler1"
        >
          <el-option v-for="c1 in list1" :key="c1.id" :label="c1.name" :value="c1.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select
          v-model="Catergory2Id"
          placeholder="请选择"
          :disabled="show"
          @change="handler2"
        >
          <el-option v-for="c2 in list2" :key="c2.id" :label="c2.name" :value="c2.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select
          v-model="Catergory3Id"
          placeholder="请选择"
          :disabled="show"
          @change="handler3"
        >
          <el-option v-for="c3 in list3" :key="c3.id" :label="c3.name" :value="c3.id" />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ['show'],
  data() {
    return {
      list1: [],
      list2: [],
      list3: [],
      Catergory1Id: '',
      Catergory2Id: '',
      Catergory3Id: ''
    }
  },
  created() {
    this.getCategory1()
  },
  methods: {
    //   获取一级分类
    async    getCategory1() {
      const res = await this.$API.attr.getCategory1()
      if (res.code === 200) {
        this.list1 = res.data
      } else {
        this.$message.warning(res.message)
      }
    },
    // 一级分类数据变化时
    async handler1() {
      // 重置表单
      this.list2 = []
      this.list3 = []
      this.Catergory2Id = ''
      this.Catergory3Id = ''
      //   发请求
      const res = await this.$API.attr.getCategory2(this.Catergory1Id)
      if (res.code === 200) {
        this.list2 = res.data
      } else {
        this.$message.warning(res.message)
      }
      this.$emit('getCategoryList', { Catergory1Id: this.Catergory1Id, leave: 1 })
    },
    // 二级分类数据变化时
    async handler2() {
      // 重置表单
      this.list3 = []
      this.Catergory3Id = ''
      const res = await this.$API.attr.getCategory3(this.Catergory2Id)
      if (res.code === 200) {
        this.list3 = res.data
      } else {
        this.$message.warning(res.message)
      }
      this.$emit('getCategoryList', { Catergory2Id: this.Catergory2Id, leave: 2 })
    },
    // 三级分类数据变化时
    async handler3() {
    //   const { Catergory1Id, Catergory2Id, Catergory3Id } = this
    //   this.$emit('getCategoryList', {
    //     Catergory1Id,
    //     Catergory2Id,
    //     Catergory3Id
    //   })
      this.$emit('getCategoryList', { Catergory3Id: this.Catergory3Id, leave: 3 })
    }

  }
}
</script>

<style>

</style>
